<template>
  <el-row :gutter="20">
    <el-col :span="8"
            v-for="(course,index) in courseList"
            :key="index"

            style="padding: 20px;">

      <el-card
          :body-style="{ padding: '0px' }"
          style="height: 300px;display: block;cursor: pointer;
                      background-image: url(https://img-blog.csdnimg.cn/20201205141748897.jpg);
                      background-size: 100% 100%;">
        <el-row>
          <div style="float: top">
            <el-tag type="success" effect="plain" hit style="float: right;margin:30px ">课程类型：公开课</el-tag>
          </div>
        </el-row>
        <el-row style="margin-top: 100px">
          <el-col :span="20" :offset="2">
            <el-row style="background-color: white;margin: 10px">
              <div style="margin-top: 5px;">
                <b>{{ course.course_name }}</b>
              </div>
              <el-row style="text-align: left;margin: 5px">

                        <span style="font-size: x-small;color: gray;">
                          开课学院：
                        </span>
                <span style="color: gray;">
                          {{ course.college }}
                        </span>
              </el-row>
              <el-row style="text-align: left;margin: 5px">
                        <span style="font-size: x-small;color: gray;">
                          课程简介：
                        </span>
                <span style="color: gray;">
                          {{ course.introduction }}
                        </span>
              </el-row>
            </el-row>
          </el-col>
        </el-row>

      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";
import qs from 'qs';

export default {
  name: "recCourse",
  async mounted() {
    axios.post('/api/getAllCourses').then(res1 => {
      console.log(res1)
      this.courseList = res1.data.courseList.reverse().slice(0,6)
    })
  },
  data() {
    return {
      courseList: [11, 22, 33, 44, 55],
    }
  }
}
</script>

<style scoped>

</style>
